<template>
  <TnPopup
    v-model="showPopup"
    :mask="mask"
    mode="bottom"
    :safe-area-inset-bottom="false"
    :content-custom-style="customPopupStyle"
    close-icon=""
    :z-index="zIndex"
    @close="handlePopupClose"
  >
    <view class="tn-action-sheet tn-safe-area-inset-bottom">
      <!-- 头部 -->
      <template
        v-if="$slots.header"
      >
        <view
          class="tn-action-sheet__header"
        >
          <slot name="header"></slot>
        </view>
      </template>

      <!-- 内容 -->
      <view class="tn-action-sheet__content">
        <view
          v-for="(item, index) in data"
          :key="index"
          class="tn-action-sheet__item"
          :class="{'disabled': item.disabled}"
          :style="itemStyle(index)"
          hover-class="tn-hover"
          :hover-stay-time="150"
          @tap.stop="handleItemClick(index)"
        >
          <!-- 主内容 -->
          <view class="content">{{ item.content }}</view>
          <!-- 子内容 -->
          <view v-if="item.subContent" class="sub-content">{{ item.subContent }}</view>
        </view>
      </view>

      <!-- 底部取消按钮 -->
      <template
        v-if="bottomCancelBtn"
      >
        <view class="tn-gap"></view>
        <view
          class="tn-action-sheet__bottom"
          hover-class="tn-hover"
          :hover-stay-time="150"
          @tap.stop="handleCancelClick"
        >
          {{ bottomCancelBtn }}
        </view>
      </template>
    </view>
  </TnPopup>
</template>

<script lang="ts" setup>
import { actionSheetProps, actionSheetEmits, ActionSheetData } from '../../../types/tn-action-sheet'
import { ref, computed, CSSProperties, watch } from 'vue'
import TnPopup from '../../tn-popup/src/Popup.vue'
import { UPDATE_MODEL_EVENT } from '../../../constants'

const props = defineProps(actionSheetProps)
const emits = defineEmits(actionSheetEmits)

// 选项数据
const data = computed<ActionSheetData[]>(() => {
  return props?.data || []
})

// 选项样式
const itemStyle = computed<(index: number) => CSSProperties>(() => {
  return (index: number) => {
    let style: CSSProperties = {}
    const item = data.value?.[index]
    if (item?.bgColor) {
      style.backgroundColor = item.bgColor
    } 
    if (item?.color) {
      style.color = item.color
    }
    return style
  }
})
// 自定义popup样式
const customPopupStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  style.backgroundColor = 'transparent'
  return style
})

// 弹出popup
let showPopup = ref<boolean>(false)
watch(() => props.modelValue, (val: boolean) => {
  showPopup.value = val
})

// 处理popup关闭事件
const handlePopupClose = () => {
  emits(UPDATE_MODEL_EVENT, false)
}

// 处理选项点击事件
const handleItemClick = (index: number) => {
  emits('change', data.value?.[index].value)
  handlePopupClose()
}

// 处理取消按钮点击事件
const handleCancelClick = () => {
  handlePopupClose()
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-action-sheet {
  width: 100%;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;

  &__header {
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1rpx solid #E6E6E6;
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #E6E6E6;
    font-size: $tn-font-size;

    .sub-content {
      color: #AAAAAA;
      font-size: 20rpx;
      margin-top: 10rpx;
    }
    &:last-child {
      border-bottom: none;
    }
  }

  &__bottom {
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: map-get(map-get($tn-type-color-map, 'danger'), 'normal');
  }
}
</style>
